<script setup lang="ts">
import { auditingQxTwo, auditingTwo, getBase } from '@fl/api/order/base'
import { useStoreDict } from '@fl/store/modules/goodHouseDict'

const props = defineProps({
    handleClose: {
        required: true,
        type: Function,
    },
    orderDetailsForm: {
        required: true,
        type: Object,
    },
    type: {
        type: String,
    },
})

const dictStore = useStoreDict()
dictStore.init(['order_shzt'])
const { getDicts } = storeToRefs(dictStore)

const id = ref<string>('')
const textRow = ref<number>(4)
const company = ref<any>({})
const house = ref<any>({})
const houseCustom = ref<any[]>([])
const orders = ref<any>({})
const projectBase = ref<any>({})
const orderDetailsForm = ref<any>({})
const operateInfo = ref<any[]>([])
const formRef = ref()
const data = reactive<any>({
    form: {
        eszt: '1',
    },
    rules: {
        eszt: [
            { message: '审核意见不能为空', required: true, trigger: 'blur' },
        ],
        unionpayNumber: [
            { message: '开户行行号不能为空', required: true, trigger: 'blur' },
            { message: '开户行行号只能输入正整数', pattern: /^\d+$/, trigger: 'blur' },
            { max: 20, message: '开户行行号最长只能输入20位', trigger: 'blur' },
        ],
    },
})
const { form, rules } = toRefs(data)
const dictLabel = computed(() => (value, arr) => {
    const obj = arr.find(d => d.value === value)
    return obj !== undefined ? obj.label : ''
})
// 确定按钮
function handleConfirm() {
    formRef.value.validate((valid) => {
        if (valid) {
            const formData = form.value
            if (props.type === '1') {
                formData.id = id.value
                auditingTwo(formData).then((_res) => {
                    if (formData.eszt === '1') {
                        ElMessage({
                            message: '订单复审已通过，请进入网签中心模块生成样板合同并开始进行人房绑定',
                            type: 'success',
                        })
                    }
                    else if (formData.eszt === '2') {
                        ElMessage({
                            message: '该订单复审意见为不同意，已同步发起退款审核流程',
                            type: 'success',
                        })
                    }
                    props.handleClose()
                })
            }
            else if (props.type === '2') {
                formData.id = props.orderDetailsForm.ordersUkey
                auditingQxTwo(formData).then((_res) => {
                    if (formData.eszt === '1') {
                        ElMessage({
                            message: '退款复审意见为同意，该订单状态更新为已取消',
                            type: 'success',
                        })
                    }
                    else if (formData.eszt === '2') {
                        ElMessage({
                            message: '退款复审意见为不同意，该订单状态还是有效状态，可进入网签中心模块生成样板合同并开始进行人房绑定！',
                            type: 'success',
                        })
                    }
                    props.handleClose()
                })
            }
        }
    })
}
// 取消按钮
function handleCancle() {
    props.handleClose()
}
onMounted(() => {
    id.value = props.orderDetailsForm.id
    orderDetailsForm.value = props.orderDetailsForm
    getDetails()
})
// 获取订单详情
function getDetails() {
    getBase(id.value).then((response) => {
        company.value = response.data.company
        house.value = response.data.house
        houseCustom.value = response.data.houseCustom
        orders.value = response.data.orders
        form.value.unionpayNumber = orders.value.unionpayNumber
        projectBase.value = response.data.projectBase
        operateInfo.value = response.data.records
    })
}
</script>

<template>
    <div class="app-container">
        <el-form ref="formRef"
                 :model="form"
                 :rules="rules"
                 label-width="120px"
                 class="demo-ruleForm"
                 status-icon
                 style="background-color: white;margin: 0 auto;width: 100%;padding: 20px;"
        >
            <el-card style="max-width: 100%">
                <template #header>
                    <div class="card-header">
                        <span>订单信息</span>
                    </div>
                </template>

                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="订单编号:">
                            {{ orders.orderNumber }}
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="订单创建时间:">
                            {{ orders.createTime }}
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="客户名称:">
                            {{ orders.userName }}
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="联系方式:">
                            {{ orders.userPhone }}
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="楼盘名称:">
                            {{ orders.xsmc }}
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="房源:">
                            {{ `${orders.dongBh}${orders.unit}-${orders.floor}-${orders.fh}` }}
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="销售价:">
                            {{ `${orders.xszj}元` }}
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="诚意金:">
                            {{ `${orders.deposit}元` }}
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>

            <br>

            <el-card style="max-width: 100%">
                <template #header>
                    <div class="card-header">
                        <span>房源信息</span>
                    </div>
                </template>

                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="监管编号:">
                            {{ house.jiangbh }}
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="监管账号:">
                            {{ house.jiangzh }}
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="监管账户名称:">
                            {{ house.jiangzhmc }}
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="监管银行名称:">
                            {{ house.jiangkhyhmc }}
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="监管总行名称:">
                            {{ house.jiangkhzhmc }}
                        </el-form-item>
                    </el-col>

                    <el-col v-if="props.type === '2'"
                            :span="12"
                    >
                        <el-form-item label="开户行行号:"
                                      prop=""
                        >
                            {{ orders.unionpayNumber }}
                        </el-form-item>
                    </el-col>

                    <el-col v-else
                            :span="12"
                    >
                        <el-form-item label="开户行行号:"
                                      prop="unionpayNumber"
                        >
                            <el-input v-model="form.unionpayNumber"
                                      type="text"
                                      placeholder="请输入银联号"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>

            <br>

            <el-card style="max-width: 100%">
                <template #header>
                    <div class="card-header">
                        <span>审核信息</span>
                    </div>
                </template>

                <el-row v-if="props.type === '2'"
                        :gutter="24"
                >
                    <el-col :span="12">
                        <el-form-item label="操作人员:">
                            {{ operateInfo.czryMc }}
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="操作时间:">
                            {{ operateInfo.sqsj }}
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="初审人员:">
                            {{ orderDetailsForm.shryMc }}
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="初审意见:">
                            {{ dictLabel(orderDetailsForm.shzt, getDicts.order_shzt) }}
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item label="初审备注:">
                    {{ orderDetailsForm.shbz }}
                </el-form-item>

                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="复审意见:"
                                      prop="eszt"
                        >
                            <el-radio-group v-model="form.eszt">
                                <el-radio v-for="(item, index) in getDicts.order_shzt"
                                          :key="index"
                                          :label="item.value"
                                          :value="item.value"
                                >
                                    {{
                                        item.label }}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item label="复审备注:"
                              prop="esbz"
                >
                    <el-input v-model="form.esbz"
                              type="textarea"
                              :rows="textRow"
                              placeholder=""
                    />
                </el-form-item>
            </el-card>

            <br>

            <el-row justify="end"
                    :gutter="24"
            >
                <el-col :span="2">
                    <el-button @click="handleCancle">
                        取 消
                    </el-button>
                </el-col>

                <el-col :span="3">
                    <el-button type="primary"
                               @click="handleConfirm"
                    >
                        确 定
                    </el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<style lang='scss' scoped>
.app-container {
    padding: 0 !important;
    height: 80vh;
    overflow-y: auto;
}

:deep(.el-dialog__body) {
    padding: 0 !important;
}
</style>
